import './index.css'
import { useRef } from 'react'
const IncreaseItem = (props) => {
    const submitValuesObj = useRef({})
    const submitValuesArray = useRef([])
    const { items, onClick, onCancel } = props
    const onChange = (item, i, e) => {
        const { target: { value } } = e;
        submitValuesArray.current[i] = value
        submitValuesObj.current[item] = value
    }
    return (
        <div className="inc-container">
            <div className="inc-content">
                {items.map((item, index) => (
                    <div className="inc-content-item">
                        <div className="inc-content-item-title">
                            {item}
                        </div>
                        <input type="text" className="inc-content-item-input" onChange={onChange.bind(this, item, index)} />
                    </div>
                ))}
            </div>
            <div className="inc-submit-field">
                <div className="inc-submit" onClick={onClick.bind(this, submitValuesObj.current, submitValuesArray.current)}>确定</div>
                <div className="inc-submit" onClick={onCancel} style={{ marginLeft: '15px' }}>取消</div>
            </div>

        </div>
    )
}
export default IncreaseItem;